<template>
  <div class="webChatUrl">
    <affix :label="$t('configLazyLoad.interfaceConfig.webChatUrl')"></affix>
    <configCompositionTwoWindowStyle :leftWidth="12" :rightWidth="12" :height="240">
      <template slot="card">
        <div style="margin-right: 20px;">
          <diyTable :tableHeader="tableHeader" :tableData="tableData" :isShow="isShow" v-loading="refreshLoading" @updata="updata" @del="del" @add="add" @refresh="refresh"></diyTable>
        </div>
      </template>
      <template slot="detail">
        <div style="margin-left: 20px;" v-if="isShowDetail">
          <breadCrumb :titleArr="titleArr" @back="back"></breadCrumb>
          <div class="webChatUrlDetail">
            <div class="webChatUrl_from">
              <el-form :model="webChatUrlForm" :rules="rules" ref="webChatUrlForm" label-position="top" label-width="120px">
                <el-form-item :label="$t('configLazyLoad.interfaceConfig.webName')" class="item" prop="name">
                  <el-input :maxlength=20 v-model.trim="webChatUrlForm.name" :placeholder="$t('public.pleaseInput')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('configLazyLoad.interfaceConfig.msgUrl')" class="item" prop="url">
                  <el-input v-model.trim="webChatUrlForm.url" :placeholder="$t('public.pleaseInput')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('configLazyLoad.interfaceConfig.msgGroup')" class="item" prop="group">
                  <el-input v-model.trim="webChatUrlForm.group" :placeholder="$t('public.pleaseInput')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('configLazyLoad.interfaceConfig.isEndPush')">
                  <el-radio-group v-model="webChatUrlForm.resource">
                    <el-radio :label="1">{{$t('public.yes')}}</el-radio>
                    <el-radio :label="2">{{$t('public.no')}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('configLazyLoad.interfaceConfig.isSatPush')">
                  <el-radio-group v-model="webChatUrlForm.Satisfied">
                    <el-radio :label="1">{{$t('public.yes')}}</el-radio>
                    <el-radio :label="2">{{$t('public.no')}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('webChatUrlForm')">{{$t('public.save')}}</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </template>
    </configCompositionTwoWindowStyle>
  </div>
</template>

<script>
  import Affix from '../../../../ui-modules/affix/Affix.vue'
  import diyTable from '../base/diyTable'
  import breadCrumb from '../../../../ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import configCompositionTwoWindowStyle from '../../../../ui-modules/config/configCompositionTwoWindowStyle'
  export default {
    name: 'webChatUrl',
    data () {
      return {
        tableData: [],
        isShowDetail: false,
        isShow: true,
        tableHeader: [
          {prop: 'name', label: this.$t('configLazyLoad.interfaceConfig.webName')},
          {prop: 'operate', label: this.$t('public.operate')}
        ],
        titleArr: [this.$t('configLazyLoad.interfaceConfig.webChatUrl'), this.$t('configLazyLoad.interfaceConfig.editInterfacePage')],
        webChatUrlForm: {
          name: '',
          url: 'http://',
          group: '',
          resource: 1,
          Satisfied: 1
        },
        rules: {
          name: [
            {required: true, message: this.$t('configLazyLoad.interfaceConfig.webChatTip1'), trigger: 'blur'}
          ],
          url: [
            {required: true, message: this.$t('configLazyLoad.interfaceConfig.webChatTip1'), trigger: 'blur'},
            {pattern: /^((http|ftp|https):\/\/)(([a-zA-Z0-9._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(\/[a-zA-Z0-9&%_./-~-]*)?/,
              message: this.$t('configLazyLoad.interfaceConfig.webChatTip2') }
          ],
          group: [
            {required: true, message: this.$t('configLazyLoad.interfaceConfig.webChatTip1'), trigger: 'blur'}
          ]
        },
        refreshLoading: false,
        addOrEdit: 'add',
        webChatId: ''
      }
    },
    created () {
      this.getWebChatList()
    },
    methods: {
      getWebChatList () {
        this.$store.dispatch('channelGetWebChatList', {data: ''}).then(res => {
          this.tableData = res.data
        })
      },
      back () {
        this.isShowDetail = false
      },
      add () {
        this.titleArr.splice(1, 1, this.$t('configLazyLoad.interfaceConfig.addInterfacePage'))
        this.addOrEdit = 'add'
        this.isShowDetail = true
        this.webChatUrlForm.group = ''
        this.webChatUrlForm.name = ''
        this.webChatUrlForm.url = 'http://'
      },
      updata (val) {
        this.addOrEdit = 'edit'
        this.webChatId = val._id
        this.isShowDetail = true
        this.webChatUrlForm.name = val.name
        this.webChatUrlForm.url = val.sendUrl
        this.webChatUrlForm.group = val.toPeer
        this.webChatUrlForm.resource = val.finishCallback
        this.webChatUrlForm.Satisfied = val.csrCallback
      },
      del (val) {
        let data = {}
        data._id = val._id
        this.$confirm(this.$t('configLazyLoad.interfaceConfig.confirmDelete'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('delWebChat', {_id: data._id}).then(res => {
            if (res && res.success) {
              this.getWebChatList()
              this.$message({
                message: this.$t('configLazyLoad.interfaceConfig.deleteSucc'),
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      },
      submitForm (val) {
        this.$refs[val].validate((valid) => {
          if (valid) {
            let data = {
              name: this.webChatUrlForm.name,
              sendUrl: this.webChatUrlForm.url,
              toPeer: this.webChatUrlForm.group,
              finishCallback: this.webChatUrlForm.resource,
              csrCallback: this.webChatUrlForm.Satisfied
            }
            if (this.addOrEdit === 'add') {
              this.$store.dispatch('addWebChat', data).then(res => {
                if (res && res.success) {
                  this.getWebChatList()
                  this.isShowDetail = false
                  this.$message.success(this.$t('config.channel.saveSuccess'))
                }
              })
            } else {
              data._id = this.webChatId
              console.log(data)
              this.$store.dispatch('updataWebChat', data).then(res => {
                console.log(res)
                if (res && res.success) {
                  this.getWebChatList()
                  this.isShowDetail = false
                }
              })
            }
          } else {
            this.$message.error(this.$t('config.channel.saveError'))
            return false
          }
        })
      },
      refresh () {
        this.refreshLoading = true
        window.setTimeout(() => {
          this.getWebChatList()
          this.refreshLoading = false
        }, 400)
      }
    },
    components: {
      Affix,
      configCompositionTwoWindowStyle,
      diyTable,
      breadCrumb
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .webChatUrl
    padding 20px
  .webChatUrlDetail
    width 250px
  .webChatUrl_from
    padding 20px
    .el-input,.el-select
      max-width 220px
  .item
    margin-bottom 20px
</style>
